import React from 'react';
import {
  Text, TouchableHighlight, View, StyleSheet
} from 'react-native';
// import Modal from 'rmc-dialog/lib/Modal';
import Modal from '../../m-group/m-modal/MModal';



export default class ActionSheetAndroid extends React.Component {

  state = {
    visible: this.props.visible || false,
  }

  /**
   * 点击item
   * @param index
   */
  confirm = (index) => {
    this.props.callback && this.props.callback(index);
    this.close();
  };

  close = () => {
    this.setState({
      visible: false,
    });
  }

  render() {
    const {config, onAnimationEnd} = this.props;

    const {title, message, options, destructiveButtonIndex, cancelButtonIndex} = config;

    const titleMsg = !!title && (
      <View style={styles.title} key='0'>
        <Text style={styles.titleText}>{title}</Text>
      </View>
    );

    const content = options.map((item, index) => {
      return (
        <View key={index}
              style={cancelButtonIndex === index ? styles.cancelBtn : undefined}>
          <TouchableHighlight
            style={[styles.btn]}
            underlayColor={'#dddddd'}>
            <Text style={destructiveButtonIndex === index ? styles.destructiveBtn : undefined}>
              {item}
            </Text>
          </TouchableHighlight>
          {cancelButtonIndex === index ? (<View style={styles.cancelBtnMask}/>) : null}
        </View>
      )
    });

    return (
      <View style={styles.container}>
        <Modal
          animationDuration={200}
          animateAppear
          visible={this.state.visible}
          onAnimationEnd={onAnimationEnd}
          style={styles.content}
          animationType="slide-up"
          maskClosable
          onClose={() => this.confirm(cancelButtonIndex || -1)}
        >
          <View>
            {titleMsg}
            {!!message && (<View style={styles.message} key='1'>
              <Text>{message}</Text>
            </View>)}
            <View>{content}</View>
          </View>

        </Modal>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    zIndex: 1000,
  },
  wrap: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
  },
  content: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: '#ffffff',
  },
  mask: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0, 0, 0, .4)',
  },
  title: {
    flex: 1,
    alignItems: 'center',
    // justifyContent: 'center',
    marginTop: 15,
    marginBottom: 15,
  },
  titleText: {
    fontWeight: '500',
  },
  message: {
    flex: 1,
    alignItems: 'center',
    // justifyContent: 'center',
    marginBottom: 15,
  },
  btn: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 50,
    borderStyle: 'solid',
    borderTopWidth: 1,
    borderTopColor: '#dddddd',
    backgroundColor: 'white',
  },
  cancelBtn: {
    marginTop: 9,
    position: 'relative',
  },
  cancelBtnMask: {
    position: 'absolute',
    top: -9,
    left: 0,
    right: 0,
    height: 9,
    backgroundColor: '#f7f7f7',
    borderStyle: 'solid',
    borderTopWidth: 1,
    borderTopColor: '#dddddd',
  },
  destructiveBtn: {
    color: '#f4333c',
    fontSize: 18,
  },
})
